---
id: 5dc23991f86c76b9248c6eb8
title: Крок 6
challengeType: 0
dashedName: step-6
---

# --description--

В попередньому кроці ви розмістили елементи `h1`, `h2`, коментар та `p` в межах елемента `main`. Це називається *вкладеність*. Вкладені елементи потрібно розміщувати на два пробіли праворуч від елемента, в який вони вкладені. Цей інтервал називається відступом та використовується для полегшення читання HTML.

Here is an example of nesting and indentation:

```html
<main>
  <h1>Most important content of the document</h1>
  <p>Some more important content...</p>
</main>
```

Елемент `h1`, елемент `h2` та коментар мають відступ на два пробіли більше, ніж елемент `main` в коді нижче. Скористайтеся пробілом на клавіатурі, щоб додати ще два пробіли перед елементом `p`, щоб він також мав належний відступ.

# --hints--

Ваш код повинен мати елемент `h2` з текстом `Cat Photos`. Можливо, ви випадково видалили його, в ньому відсутні обидва початковий та кінцевий теґи, або змінився текст.

```js
assert(
  document.querySelector('h2') &&
    code.match(/<\/h2\>/) &&
    document.querySelector('h2').innerText.toLowerCase() === 'cat photos'
);
```

Ви не повинні додавати елементи `ul` або `li` з прикладу.

```js
assert(
  !document.querySelector('ul') && !document.querySelector('li')
);
```

Ви не повинні змінювати відступ в рядку зі своїм елементом `h2`. Його початковий теґ має починатися через 6 пробілів від початку рядка. Ви можете перезапустити крок, щоб відновити оригінальний відступ.

```js
assert(code.toLowerCase().match(/<\/h1\>\s*\n\s{6}<h2>/));
```

Ваш код повинен мати коментар. Ви видалили коментар з попереднього кроку.

```js
assert(code.match(/<!--.*-->/));
```

Текст коментаря повинен бути `TODO: Add link to cat photos`. Не змінюйте текст та пробіли коментаря.

```js
assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\.?\s*-->/i));
```

Ви не повинні змінювати відступ в рядку зі своїм елементом-коментарем. Його початковий теґ має починатися через 6 пробілів від початку рядка. Ви можете перезапустити крок, щоб відновити оригінальний відступ.

```js
assert(
  code
    .toLowerCase()
    .match(/<\/h2>\s*\n\s{6}<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/)
);
```

Ваш код повинен мати елемент `p`. Ви видалили елемент `p` з попереднього кроку.

```js
assert(document.querySelector('p'));
```

Текстом елемента `p` повинен бути `See more cat photos in our gallery.` Не змінюйте текст, пробіли чи знаки пунктуації елемента `p`.

```js
assert(
  document
    .querySelector('p')
    .innerText.toLowerCase()
    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
);
```

Початковий теґ `p` повинен мати відступ, який відповідає вашим елементам `h2` та коментарю. Його початковий теґ має починатися через 6 пробілів від початку рядка.

```js
assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
    --fcc-editable-region--
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
    <p>See more cat photos in our gallery.</p>
    </main>
--fcc-editable-region--
  </body>
</html>
```

